<template>
  <div class="system-container">
    <!-- 顶部选项卡 -->
    <el-tabs v-model="activeTab" class="system-tabs">
      <el-tab-pane label="用户管理" name="user">
        <!-- <UserManagement /> -->
      </el-tab-pane>
      <el-tab-pane label="角色管理" name="role">
        <!-- <RoleManagement /> -->
      </el-tab-pane>
      <el-tab-pane label="权限管理" name="permission">
        <!-- <PermissionManagement /> -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// import UserManagement from './user/index.vue'
// import RoleManagement from './role/index.vue'
// import PermissionManagement from './permission/index.vue'

const activeTab = ref<'user' | 'role' | 'permission'>('user')
</script>

<style lang="scss" scoped>
.system-container {
  padding: 20px;
  background-color: #f5f7fa;
  height: calc(100vh - 84px);
  
  .system-tabs {
    background: #fff;
    padding: 0 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    :deep(.el-tabs__header) {
      margin: 0;
    }
    
    :deep(.el-tabs__content) {
      padding: 20px 0;
      min-height: 500px;
    }
  }
}
</style>